<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>

		<!-- 设置头像 -->
		<view v-if="editUser.editKey==='avatar'">
			<imageUpload v-model="picList"></imageUpload>
		</view>

		<!-- 设置学校 -->
		<view v-else-if="editUser.editKey==='schoolId'">
			<view style="align-items: center;background:#2B92FF ;padding: 20rpx;border-radius: 10rpx;">
				<view
					style="border: 2rpx solid white ;border-radius: 10rpx;width:100%;display: flex;align-items: center;background:#ffffff ;">
					<u-search placeholder="请输入搜索内容" v-model="schoolId" @custom="seachSchool"></u-search>
				</view>
				<view style="margin: 10px;"></view>
				<view @click="selectSchoolShow = true"
					style="border: 2rpx solid white ;border-radius: 10rpx;width:100%;display: flex;align-items: center;background:#ffffff ;">
					<text style="margin: 5px;width: 55px;">
						学校
					</text>
					<view
						style="padding: 0px 5px; background:#F2F2F2;border-radius: 3px;width: 100%;margin-right: 5px;">
						{{editUser.currentValue==='null'?"请选择学校":editUser.currentValue}}
					</view>
				</view>
			</view>

			<u-picker :show="selectSchoolShow" :columns="schoolOptions" keyName="name" @cancel="closeSchoolSelect"
				@confirm="confirmSchoolSelect">
			</u-picker>
		</view>

		<!-- 设置校区 -->
		<view v-else-if="editUser.editKey==='campusId'">
			<view style="align-items: center;background:#2B92FF ;padding: 20rpx;border-radius: 10rpx;">
				<view @click="selectCampusShow = true"
					style="border: 2rpx solid white ;border-radius: 10rpx;width:100%;display: flex;align-items: center;background:#ffffff ;">
					<text style="margin: 5px;width: 55px;">
						校区
					</text>
					<view
						style="padding: 0px 5px; background:#F2F2F2;border-radius: 3px;width: 100%;margin-right: 5px;">
						{{editUser.currentValue==='null'?"请选择校区":editUser.currentValue}}
					</view>
				</view>
			</view>

			<u-picker :show="selectCampusShow" :columns="campusOptions" keyName="name" @cancel="closeCampusSelect"
				@confirm="confirmCampusSelect">
			</u-picker>
		</view>

		<!-- 设置性别 -->
		<view v-else-if="editUser.editKey==='sex'">
			<u-radio-group v-model="sexName" placement="column">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in sexList" :key="index"
					:label="item.name" :name="item.name" @change="sexChange">
				</u-radio>
			</u-radio-group>
		</view>

		<!-- 修改密码 -->
		<view v-else-if="editUser.editKey==='password'">
			<u--form :model="editPasswordForm" ref="editPasswordForm">
				<u-form-item label="输入原密码" :prop="editPasswordForm.oldPassword" borderBottom="true" labelWidth="80">
					<u-input v-model="editPasswordForm.oldPassword" password />
				</u-form-item>
				<u-form-item label="输入新密码" :prop="editPasswordForm.newPassword1" borderBottom="true" labelWidth="80">
					<u-input v-model="editPasswordForm.newPassword1" password />
				</u-form-item>
				<u-form-item label="再次输入新密码" :prop="editPasswordForm.newPassword2" borderBottom="true" labelWidth="80">
					<u-input v-model="editPasswordForm.newPassword2" password />
				</u-form-item>
			</u--form>
			<view style="margin: 10px;"></view>
			<u-button type="primary" @click="resetPassword" style="width: 90%;">提交</u-button>
		</view>

		<!-- 设置其他信息 -->
		<view v-else>
			<u--form :model="editUser" ref="uForm">
				<u-form-item :label="editUser.editName" :prop="editUser.editKey" borderBottom="true" labelWidth="80">
					<u--textarea v-if="editUser.editKey=='contactInformation'||editUser.editKey=='selfIntroduction'"
						v-model="editUser.currentValue" placeholder="请输入内容" autoHeight count
						maxlength='250'></u--textarea>
					<u-input v-else v-model="editUser.currentValue" />
				</u-form-item>
			</u--form>
		</view>

		<view style="margin: 10px;" v-if="editUser.editKey!='password'"></view>
		<u-button type="primary" @click="updateUserProfile" style="width: 90%;"
			v-if="editUser.editKey!='password'">提交</u-button>

		</u-picker>
	</view>
</template>

<script>
	import {
		updateUserProfile,
		updateUserPwd
	} from "@/api/user";
	import {
		listSchool
	} from "@/api/schoolMessage/school.js";
	import {
		listCampus
	} from "@/api/schoolMessage/campus.js";
	import {
		logout
	} from "@/api/login";
	import imageUpload from "@/components/ImageUpload/ImageUpload.vue";

	export default {
		components: {
			imageUpload
		},
		data() {
			return {
				editUser: {},
				/// 学校选择
				selectSchoolShow: false,
				schoolOptions: [],
				// 搜索学校名称
				schoolId: '',
				schoolQueryParams: {
					name: ''
				},
				/// 校区选择
				campusId: '',
				campusOptions: [],
				selectCampusShow: false,
				/// 性别选择
				sexList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],
				sexName: "其他",
				// 图片集合
				picList: [],
				/// 修改密码
				editPasswordForm: {
					oldPassword: '',
					newPassword1: '',
					newPassword2: ''
				}

			}
		},
		created() {

		},
		// 获取路由的参数
		onLoad(e) {
			// console.log("e:" + JSON.stringify(e));
			if (e) {
				this.editUser = {
					editKey: e.editKey,
					currentValue: e.currentValue,
					editName: e.editName,
					valueId: e.valueId,
					schoolId: e.schoolId
				};
				if (e.editKey === 'schoolId') {
					this.getSchoolList();
				} else if (e.editKey === 'campusId') {
					this.getCampusList();
				} else if (e.editKey === 'sex') {
					this.sexName = this.getSexName(e.currentValue);
				} else if (e.editKey === 'avatar') {
					this.picList.push(e.currentValue);
					console.log("修改前的头像 this.picList:" + JSON.stringify(this.picList));
				}
			}
		},
		methods: {
			updateUserProfile() {
				let updateUser = {};
				if (this.editUser.editKey === 'schoolId' || this.editUser.editKey === 'campusId') {
					updateUser = {
						[this.editUser.editKey]: this.editUser.valueId
					};
				} else if (this.editUser.editKey === 'avatar') {
					updateUser = {
						[this.editUser.editKey]: this.picList[0]
					};
				} else {
					updateUser = {
						[this.editUser.editKey]: this.editUser.currentValue
					};
				}
				console.log("updateUser:" + JSON.stringify(updateUser));
				updateUserProfile(updateUser).then(res => {
					// 修改成功，返回之前的页面
					uni.reLaunch({
						url: "/pages/my/my"
					})
					this.$refs.uToast.show({
						type: 'success',
						message: "修改成功"
					})
				}).catch(res => {
					// console.log("响应出错");
					// console.log("res：" + JSON.stringify(res));
					this.$refs.uToast.show({
						type: 'error',
						message: res.msg
					})
				})
			},
			/**
			 * 修改密码
			 */
			resetPassword() {
				let isSame = this.editPasswordForm.newPassword1 === this.editPasswordForm.newPassword2;
				if (isSame == false) {
					this.$refs.uToast.show({
						type: 'error',
						message: '两次输入的新密码不同，请重新输入'
					})
				} else if (this.editPasswordForm.newPassword1.length < 6) {
					this.$refs.uToast.show({
						type: 'error',
						message: '新密码长度小于6个字符，请重新输入'
					})
				} else {
					updateUserPwd(this.editPasswordForm.oldPassword, this.editPasswordForm.newPassword1).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '密码修改成功，即将退出账号，请重新登录'
						})
						setTimeout(() => {
							this.logout();
						}, 2000)
					}).catch(res => {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg
						})
					})
				}
			},

			getSchoolList() {
				listSchool(this.schoolQueryParams).then(res => {
					this.schoolOptions = [];
					this.schoolOptions.push(res.rows);
					// console.log("this.schoolOptions:" + JSON.stringify(this.schoolOptions));
				})
			},
			/**
			 * 搜索学校
			 */
			seachSchool() {
				this.schoolQueryParams.name = this.schoolId;
				// console.log("this.schoolQueryParams:"+JSON.stringify(this.schoolQueryParams))
				this.getSchoolList();
				this.selectSchoolShow = true;
			},
			/**
			 * 关闭学校选择
			 */
			closeSchoolSelect() {
				// console.log("closeSchoolSelect")
				this.selectSchoolShow = false;
			},
			/**
			 * 确定选择学校
			 */
			confirmSchoolSelect(e) {
				this.editUser.valueId = e.value[0].id;
				this.editUser.currentValue = e.value[0].name;
				// console.log("this.editUser.schoolId:" + this.editUser.schoolId);
				this.selectSchoolShow = false;
			},
			/**
			 * 获取校区列表
			 */
			getCampusList() {
				// console.log("你的学校id1：" + this.editUser.schoolId);
				// 请注意，随着路由传递过来的null是字符串类型
				if (this.editUser.schoolId == "null") {
					this.$refs.uToast.show({
						type: 'error',
						message: "请先设置好您的学校"
					})
				} else {
					let CampusQueryParams = {
						schoolId: this.editUser.schoolId
					}
					console.log("你的学校id2：" + this.editUser.schoolId);
					listCampus(CampusQueryParams).then(res => {
						this.campusOptions = [];
						this.campusOptions.push(res.rows);
						// console.log("this.schoolOptions:" + JSON.stringify(this.schoolOptions));
					})

				}
			},
			/**
			 * 关闭校区选择
			 */
			closeCampusSelect() {
				// console.log("closeSchoolSelect")
				this.selectCampusShow = false;
			},
			/**
			 * 确定选择校区
			 */
			confirmCampusSelect(e) {
				this.editUser.valueId = e.value[0].id;
				this.editUser.currentValue = e.value[0].name;
				// console.log("this.editUser.schoolId:" + this.editUser.schoolId);
				this.selectCampusShow = false;
			},
			/**
			 * 修改性别
			 */
			sexChange(e) {
				// console.log("sexChange:" + JSON.stringify(e));
				if (e == "男") {
					this.editUser.currentValue = 0;
				} else if (e == "女") {
					this.editUser.currentValue = 1;
				} else if (e == "其他") {
					this.editUser.currentValue = 2;
				}
			},
			getSexName(type) {
				if (type == 0) {
					return "男";
				} else if (type == 1) {
					return "女";
				} else if (type == 2) {
					return "其他";
				}
			},
			/**
			 * 登出账号
			 */
			logout() {
				console.log("退出账号：")
				logout().then(res => {
					console.log("退出账号：" + JSON.stringify(res));
					// 清除所有缓存
					uni.clearStorageSync();
					// 跳转到首页
					uni.redirectTo({
						url: "/pages/login/login"
					})
				})
			},

		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
	}
</style>